import { Input, Button } from 'antd';
import React, { useState } from "react";
//验证码
interface PhoneCodeInputProps {
    onChange?: () => void
    value?: string
    prefix?: React.ReactNode
    getPhoneCode: () => Promise<boolean>
}
const PhoneCodeInput = (props: PhoneCodeInputProps) => {
    const [time, settime] = useState(60)
    const [getPhoneVisible, setgetPhoneVisible] = useState(true)
    async function getPhoneCode() {
        if (await props.getPhoneCode()) {
            setgetPhoneVisible(false)
            let timer = setInterval(() => {
                settime((time) => {
                    time--
                    if (time == 0) {
                        clearInterval(timer)
                        setgetPhoneVisible(true)
                    }
                    return time
                })
            }, 1000)
        }
    }
    return (
        <Input
            value={props.value}
            placeholder='请输入手机号验证码'
            onChange={props.onChange}
            size="large"
            prefix={props.prefix}
            maxLength={6}
            suffix={
                getPhoneVisible ?
                    <Button type='link' style={{ paddingRight: 0 }} onClick={getPhoneCode}>获取验证码</Button> :
                    <Button type='link' style={{ paddingRight: 0 }} disabled>{time}s</Button>
            }
        />
    )
}

export default PhoneCodeInput